<!-- 修改密码界面 -->
<template>
	<view>
		<input v-if="user.password" class="uni-input py-2 px-3" type="text" placeholder="输入旧密码" v-model="oldpassword" />
		<input class="uni-input py-2 px-3" type="text" placeholder="输入新密码" v-model="newpassword" />
		<input class="uni-input py-2 px-3" type="text" placeholder="输入确认密码" v-model="revpassword" />
		<view class="py-2 px-3">
			<!-- 设置按钮是否禁用 -->
			<button
				class="bg-main text-white"
				style="border-radius:50rpx;border:0;"
				type="primary"
				:disabled="disabled"
				:class="disabled ? 'bg-main-disabled' : ''"
				@click="submit"
			>
				设置
			</button>
		</view>
	</view>
</template>

<script>
	// 引入 vuex  数据管理工具
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				oldpassword: ' ', // 接口 必传，否则返回不到，输入0，或者打空格都行
				newpassword: '',
				revpassword: '',
			};
		},
		// 监听输入框，有一个为空 按钮就是灰色
		computed: {
			// 结构赋值
			...mapState({
				// 获取到vuex里 state中的user 用户信息
				user: (state) => state.user,
			}),
			disabled() {
				// 如果 用户有旧密码，三个都需要验证
				if(this.user.password){
					return this.oldpassword == '' || this.newpassword == '' || this.revpassword == '';
				}else{ // 否则验证 新密码和确认密码
					return this.newpassword == '' || this.revpassword == '';
				}
				
			},
		},
		// 存放所有事件
		methods: {
			// 验证 新密码 和确认密码 是否相等
			check() {
				if (this.newpassword !== this.revpassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none',
						duration: 1000,
					});
					return false;
				}
				return true;
			},
			// 设置 按钮
			submit() {
				// 如果验证 新密码和输入 ，不一致 -终止
				if (!this.check()) {
					return;
				}
			    this.$H.post('/repassword',{
					oldpassword:this.oldpassword,  // 原密码
					newpassword:this.newpassword,  // 新密码
					renewpassword:this.revpassword // 确认密码
				},{token:true}).then(res=>{
					// 调用 vuex中 修改信息方法
					this.$store.commit('editUserInfo', {
						key: 'password', // state.user中的 phone字段
						value: true,
					});
					uni.showToast({
						title: '修改密码成功',
						icon: 'none',
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						});
					}, 800);
				})
			},
		},
	};
</script>

<style lang="scss"></style>
